import React, { useState, useEffect } from 'react';
import Taro from '@tarojs/taro';
import { View } from '@tarojs/components'
import {AtIcon, AtSearchBar} from 'taro-ui'
import { getHeadTop } from '../../../utils/tools'
import './header-bar.scss'

const headTop = getHeadTop()
interface SearchBarType {
  value: string
  searchChange?: any
  searchClear?: any
  search?: any
  color?: string
}
const SearchBar: React.FC<SearchBarType> = (props) => {
    const [showBack, setShowBack] = useState(true)
    useEffect(() => {
        const pages = Taro.getCurrentPages();
        if(pages.length <= 1){
            setShowBack(false)
        }
    }, [])


    return (
        <View className='headerBar fixed' style={`top: ${(headTop && (headTop.statusBar + headTop.top)) || 0}px;`}>
            <View className={`search-bar ${process.env.TARO_ENV}`}><AtSearchBar  value={props.value} onChange={props.searchChange} onClear={props.searchClear} onConfirm={props.search} onActionClick={props.search}></AtSearchBar></View>
            {showBack && <View className='back' onClick={() => Taro.navigateBack()}><AtIcon value='chevron-left' size='20' color={props.color}></AtIcon></View>}
            {!showBack && <View className='home' onClick={() => Taro.switchTab({url: '/pages/index/index'})}><AtIcon prefixClass='xxhz' value='shouye' size='16' color='black'></AtIcon></View>}
        </View>
    )
}

SearchBar.defaultProps = {
    value:'',
    color: 'white'
}

export default SearchBar
